{include file="public/header"}


{include file="public/style"}       
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
            <el-card >
                <div style="display: flex;align-items: center;justify-content: flex-start;">
                    <el-form :inline="true" :model="searchForm" size="mini"  ref="refsearchForm">                
                        <el-form-item label="用户昵称">                     
                            <el-select v-model="searchForm.userid" placeholder="请选择用户状态" filterable clearable>
                                <el-option v-for="item in userinfo" :key="item.id" :label="item.nickname" :value="item.id">
                                </el-option>
                            </el-select>      
                        </el-form-item>         
       
                        <el-form-item label="用户状态">
                            <el-select v-model="searchForm.status" placeholder="请选择用户状态" filterable clearable>
                                <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item> 
                        <el-form-item label="权限组">
                            <el-select v-model="searchForm.auths" placeholder="请选择权限组" filterable clearable>
                                <el-option v-for="item in authgroupsinfo" :key="item.id" :label="item.title" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item> 
    
                        <el-form-item label="仓库">
                            <el-select v-model="searchForm.storageid" placeholder="请选择仓库" filterable clearable>
                                <el-option v-for="item in storage" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item> 
    
                        <el-form-item>
                            <el-button type="primary"  size="mini" plain @click="getSearch" icon="el-icon-search" v-cloak>查询</el-button>
                        </el-form-item>          
                      </el-form>
                    
                    <div style="margin-left: auto;margin-bottom: 20px;margin-right: 20px;" >
                            <el-button  type="primary"   @click="create" size="mini"  icon="el-icon-edit" >添加用户</el-button>       
                    </div>
                </div>
    
                <el-table :data="tablelist"   style="width: 100%;margin-bottom: 20px;"  row-key="id"  border >
                    <el-table-column   prop="id" label="ID" width="80"> </el-table-column>
                    <el-table-column   prop="nickname" label="用户昵称" width="280"> </el-table-column>  
                    <el-table-column   prop="auth_name" label="权限组">
                            <template v-slot="{row}">
                                <span v-if="row.id===1">默认所有权限</span>
                                <span v-else>{{row.auth_name}}</span>
                            </template>
                    </el-table-column>   
                    <el-table-column   prop="storage_name" label="所属仓库"> </el-table-column>   
                    <el-table-column   prop="status"  label="用户状态" width="100"> 
                            <template v-slot="{row}">
                                <span v-if="row.status===1">
                                    <el-tag type="success">启用</el-tag>
                                 </span>
                                 <span   v-if="row.status===0">
                                    <el-tag type="danger">禁用</el-tag>                                                
                                </span>   
                        </template>                          
                    </el-table-column>
                    <el-table-column   prop="registertime" label="入职时间" width="160"> </el-table-column>  
                    <el-table-column  fixed="right" label="操作" width="300">
                        <template v-slot="{row}">
                            <el-button type="primary"  plain  icon="el-icon-edit" v-if="row.id !==1"   @click="create(row)" >编辑&设置权限 </el-button>
                            <el-button type="danger"  plain   icon="el-icon-delete" v-if="row.id !==1"  @click="cancel(row.id)">删除</el-button>             
                        </template>
                    </el-table-column>
                </el-table>
    
                <!-- page -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[20,50,100, 150, 300,500,1000,2000]"
                    :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>  
            </el-card>  
    </div>

    <script>
    new Vue({
        el: '#app',
        data: function () {
            return {    
                authgroupsinfo:{$authgroupsinfo|raw},  //权限 组信息
                userinfo:{$userinfo|raw},          //所搜栏用户
                storage:{$storage|raw},//仓库信息
                title:'',           
                ConfigFormVisible:false,//控制配置弹窗
                status:[
                {
                    value: 2,
                    label: '关闭'
                },
                {
                    value: 1,
                    label: '正常'
                }
                ],// 状态是否正常       
                is_default:[
                {
                    value: 1,
                    label: '主仓库'
                },
                {
                    value: 2,
                    label: '样品仓'
                }
                ],//仓库类型
                total:0,   //分页总页数      
                tablelist:[] ,              
                searchForm: {              
                    userid: '',
                    status: '',
                    auths: '',
                    storageid: '',
                    pagesize: 20,
                    pagenum: 1,
                    
                },      
                createForm:{
                    code:'',          
                    name:'',               
                },
             
            }
        },
        mounted(){        
            this.getSearch()
        },
        methods: {        

            async getDatalist() {
                const res = await axios.post('/admin/user/index', {params: this.searchForm})
                    if (res.status !== 1) {
                        return this.$message.error(res.info);
                    }
                this.total = res.info.total
                this.tablelist = res.info.list

            },
                
            handleSizeChange(newSize) {
                this.searchForm.pagesize = newSize
                this.getDatalist()
            },
            handleCurrentChange(newPage) {
                this.searchForm.pagenum = newPage
                this.getDatalist()
            },           
            getSearch() {
                this.searchForm.pagenum = 1
                this.getDatalist()
            },
        
        
            //删除
            cancel($id){
                this.$confirm('确认需要删除？删除了无法恢复', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    closeOnClickModal: false, // 禁用点击遮罩关闭弹窗
                    type: 'warning'
                }).then(() => {
                    axios.post('/admin/user/delete', {params: {id: $id}}).then(res => {
                        if (res.status !== 1) {
                            return this.$message.error(res.info);             
                        }                    
                        this.$message.success('删除成功');
                        this.getDatalist()
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                    this.$message.info('已取消');
                });
            },
                //设置权限
            create (row){
                window.location.href = "/admin/user/purview?id="+row.id
            }
            
            
        }
        })
    </script>
 </body> 
</html>
